<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/js/jquery-1.11.1.min.js"></script>
<link href="${APP_PATH}/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/js/bootstrap/js/bootstrap.min.js"></script>
<!-- jBox插件需要的东西 -->
<script language='javascript' src='${APP_PATH}/js/jBox/jquery.jBox-2.3.min.js'></script>
<script language='javascript' src='${APP_PATH}/js/jBox/i18n/jquery.jBox-zh-CN.js'></script>
<link rel="stylesheet" href="${APP_PATH}/js/jBox/Skins/Gray/jbox.css" type="text/css">
</head>
<body>
	<!-- 模态框：添加公告 -->
	<div class="modal fade" id="noticeAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加公告</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 公告名称 -->
			  <div class="form-group">
			    <label for="noticeName_add_input" class="col-sm-2 control-label">公告名称</label>
			    <div class="col-sm-6">
			      <input type="text" name="noticeName"  class="form-control" id="noticeName_add_input" placeholder="公告名称">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 公告内容 -->
			  <div class="form-group">
			    <label for="noticeContent_add_input" class="col-sm-2 control-label">公告内容</label>
			    <div class="col-sm-6">
			      <input type="text" name="noticeContent" class="form-control" id="noticeContent_add_input" placeholder="公告内容">
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="notice_save_btn">提交</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 模态框：查看公告 -->
	<div class="modal fade" id="noticeCheckModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">查看公告</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 公告名称 -->
			  <div class="form-group">
			    <label for="noticeName_check_input" class="col-sm-2 control-label">公告名称</label>
			    <div class="col-sm-8">
			      <p class="form-control-static" id="noticeName_check_static"></p>
			    </div>
			  </div>
			  <!-- 公告内容 -->
			  <div class="form-group">
			    <label for="noticeContent_check_input" class="col-sm-2 control-label">公告内容</label>
			    <div class="col-sm-8">
			      <p class="form-control-static" id="noticeContent_check_static"></p>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 模态框：修改公告 -->
	<div class="modal fade" id="noticeUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">修改公告</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 公告名称 -->
			  <div class="form-group">
			    <label for="noticeName_update_input" class="col-sm-2 control-label">公告名称</label>
			    <div class="col-sm-8">
			      <input type="text" name="noticeName" class="form-control" id="noticeName_update_input">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 公告内容 -->
			  <div class="form-group">
			    <label for="noticeContent_update_input" class="col-sm-2 control-label">公告内容</label>
			    <div class="col-sm-8">
			      <textarea class="form-control" rows="10" name="noticeContent" id="noticeContent_update_textarea"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="notice_update_btn">提交</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 主页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h4>公告管理</h4>
			</div>
		</div>
		<hr/>
		<!-- 模糊查询栏 -->
		<div class="row">
			<label class="col-md-1.5 col-md-offset-4">公告名称：</label>
		    <input type="text" name="notice" id="notice_select_input" >
		    <input class="btn btn-info" type="button" id="notice_check_like_btn" value="查找">
		</div>
		<p id="timeFresh" style="font-size: 10px;"></p>
		<hr/>
		<a href="${APP_PATH}/getNoticeDataAsExcel">输出为excell表格</a>
		<hr/>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<input class="btn btn-primary" type="button" id="notice_add_modal_btn" value="新增" /> 
				<input class="btn btn-info" type="button" id="notice_check_modal_btn" value="查看" /> 
				<input class="btn btn-warning" type="button" id="notice_update_modal_btn" value="更新" />
				<input class="btn btn-danger" type="button" id="notice_delete_btn" value="删除" />
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<table class="table table-bordered" id="notices_table">
				<thead>
					<tr class="info">
						<td></td>
						<td>ID</td>
						<td>标题</td>
						<td>发布时间</td>
						<td>内容</td>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<!-- 显示分页信息栏 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页导航条信息 -->
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>
	
	

	<script type="text/javascript">
		
		var totalRecord,currentPage;
		
		//页面加载完成发送ajax请求，得到首页信息
		$(function(){
			to_page(1);
		});
		
		//页面跳转的函数
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/notices",
				data:"pn="+pn,
				type:"get",
				success:function(result){
					//1、页面加载完成后，直接发送ajax请求，要到返回的数据
					build_notices_table(result);
					
					//2、解析并显示分页信息
					build_page_info(result);
					
					//3、解析并显示导航条信息
					build_page_nav(result);
				}
				
			});
		}
		
		//表格数据的解析方法
		function build_notices_table(result){
			//构建之前先清空数据
			$("#notices_table tbody").empty();
			var notices = result.extend.pageInfo.list;
			$.each(notices,function(index,item){
				var checkBoxTd = $("<td><input type='radio' name='optionsRadios' class='check_item'></td>");
				var noticeIdTd = $("<td></td>").append(item.noticeId);
				var noticeNameTd = $("<td></td>").append(item.noticeName);
				var createTimeTd = $("<td></td>").append(item.createTime);
				var noticeContentTd = $("<td></td>").append(item.noticeContent);
				
				$("<tr></tr>").append(checkBoxTd)
							.append(noticeIdTd)
							.append(noticeNameTd)
							.append(createTimeTd)
							.append(noticeContentTd)
							.appendTo("#notices_table tbody");
			})
		}
		
		//分页信息数据解析
		function build_page_info(result){
			//操作之前清空数据
			$("#page_info_area").empty();
			$("#page_info_area").append("当前第 " + result.extend.pageInfo.pageNum + " 页， " 
										+ " 总共 " + result.extend.pageInfo.pages + " 页， " 
										+ " 总共 " + result.extend.pageInfo.total + " 条记录");
			totalRecord = result.extend.pageInfo.total;
			currentPage = result.extend.pageInfo.pageNum;
		}
		
		//分页条数据,点击分页发送ajax请求得到数据
		function build_page_nav(result){
			//操作之前清空数据
			$("#page_nav_area").empty();
			//创建UL标签
			var ul = $("<ul></ul>").addClass("pagination");
			
			//首页导航条
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			//上一页导航条
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
			//判断是否有上一页，没有上一页则给上一页和首页添加失效标签，有则有单击事件
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//首页的单击事件
				firstPageLi.click(function(){
					to_page(1);
				});
				//上页的单击事件
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum - 1);
				})
			}
			
			ul.append(firstPageLi).append(prePageLi);
			
			//分页导航条
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				//当前页码高亮显示
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				//导航条单击事件，跳转到对应的页码
				numLi.click(function(){
					to_page(item);
				})
				ul.append(numLi);
			})
			
			//下一页导航条
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
			//末页导航条
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			//判断是否有下一页，没有下一页则给下一页和末页添加失效标签，有则有单击事件
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				//下一页的单击事件
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum + 1);
				});
				//末页的单击事件
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				})
			}
			
			ul.append(nextPageLi).append(lastPageLi);
			
			var navEle = $("<nav></nav>").append(ul);
			
			navEle.appendTo("#page_nav_area");
		}
		
		//表单重置方法
		function reset_form(ele){
			//清空表单数据
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			//清空表单提示信息：<span>的class为help-block
			$(ele).find(".help-block").text("");
		}
		
		//封装提示信息为一个方法
		function show_validate_msg(ele,status,msg){
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			if("success" == status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}else if("error" == status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		//新增公告的模态框
		//(单击事件事项方法一)此时整个script必须放在body下边，否则此方法放在document.ready中
		$("#notice_add_modal_btn").click(function(){
			//清除表单数据（表单完整重置（表单的数据，表单的样式））
			reset_form("#noticeAddModal form");
			//弹出模态框
			$("#noticeAddModal").modal({
				backdrop:"static"
			});
		});
		
		//新增模态框提交按钮的单击事件
		$("#notice_save_btn").click(function(){
			//发送ajax请求保存员工信息
			$.ajax({
				url:"notice",
				type:"post",
				data:$("#noticeAddModal form").serialize(),
				dataType:"json",
				success:function(result){
					//判断状态码
					if(result.code == 100){
						//员工保存成功后需要做1、关闭模态框  2、到最后一页显示添加的信息
						alert("新增成功");
						$("#noticeAddModal").modal("hide");
						to_page(totalRecord);
					}else{
						//用户后台校验失败，返回失败信息
						//判断有那个错误信息就显示那个错误信息
						if(undefined != result.extend.errorFields.email){
							show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
						}
						if(undefined != result.extend.errorFields.empName){
							show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
						}	
					}
				}
			});
		})
		
		//查看查询员工信息的方法
		function getCheckHeyunNotice(noticeId){
			$.ajax({
				url:"${APP_PATH}/notice/"+noticeId,
				type:"get",
				success:function(result){
					var noticeEle = result.extend.notice;
					$("#noticeName_check_static").text(noticeEle.noticeName);
					$("#noticeContent_check_static").text(noticeEle.noticeContent);
				}
			});
		}
		
		//查看公告的模态框
		$("#notice_check_modal_btn").click(function(){
			var noticeId="";
			$.each($(".check_item:checked"),function(){
				noticeId = $(this).parents("tr").find("td:eq(1)").text();
			})
			if(noticeId == ""){
				jBox.tip("请选择一个公告进行查看","warning");
				//alert("请选择一个公告进行查看");
			}else{
				getCheckHeyunNotice(noticeId);
				//弹出模态框
				$("#noticeCheckModal").modal({
					backdrop:"static"
				});
			}
		});
		
		//更新查询员工信息的方法
		function getUpdateHeyunNotice(id){
			$.ajax({
				url:"${APP_PATH}/notice/"+id,
				type:"get",
				success:function(result){
					var noticeEle = result.extend.notice;
					$("#noticeName_update_input").val(noticeEle.noticeName);
					$("#noticeContent_update_textarea").val(noticeEle.noticeContent);
				}
			});
		}
		
		//更新公告的模态框
		$("#notice_update_modal_btn").click(function(){
			//清除表单数据（表单完整重置（表单的数据，表单的样式））
			//reset_form("#noticeUpdateModal form");
			var noticeId="";
			$.each($(".check_item:checked"),function(){
				noticeId = $(this).parents("tr").find("td:eq(1)").text();
			})
			if(noticeId == ""){
				jBox.tip("请选择一个公告进行更新！","warning");
				//alert("请选择一个公告进行更新！");
			}else{
				getUpdateHeyunNotice(noticeId);
				//弹出模态框
				$("#noticeUpdateModal").modal({
					backdrop:"static"
				});
			}
		});
		
		//公告更新模态框更新按钮的单击事件
		$("#notice_update_btn").click(function(){
			var noticeId="";
			$.each($(".check_item:checked"),function(){
				noticeId = $(this).parents("tr").find("td:eq(1)").text();
			})
			//发送ajax请求更新员工信息
			$.ajax({
				url:"${APP_PATH}/notice/" + noticeId,
				type:"PUT",
				data:$("#noticeUpdateModal form").serialize(),
				success:function(result){
					//1、返回成功关闭模态框
					$("#noticeUpdateModal").modal("hide");
					//2、返回当前页码数据
					to_page(currentPage);
				}
			});
		})
		
		//删除按钮的单击事件
		$("#notice_delete_btn").click(function(){
			var noticeId="";
			$.each($(".check_item:checked"),function(){
				noticeId = $(this).parents("tr").find("td:eq(1)").text();
				noticeName = $(this).parents("tr").find("td:eq(2)").text();
			})
			if(noticeId==""){
				jBox.tip("请选择需要删除的公告！","warning");
				//alert("请选择需要删除的公告！")
			}else{
				if(confirm("确认删除【"+noticeName+"】吗？")){
					//发送ajax请求更新员工信息
					$.ajax({
						url:"${APP_PATH}/notice/" + noticeId,
						type:"DELETE",
						success:function(result){
							//提示删除结果
							alert(result.message);
							//console.log(result);
							//删除完成后返回当前页面数据
							to_page(currentPage);
						}
					});
				}
			}
		})
		
		//模糊查询页面跳转的函数
		function to_page_byLike(pn,likeName){
			$.ajax({
				url:"${APP_PATH}/notices_byLike",
				data:{"pn":pn,"likeName":likeName},
				type:"get",
				success:function(result){
					//1、页面加载完成后，直接发送ajax请求，要到返回的数据
					build_notices_table(result);
					
					//2、解析并显示分页信息
					build_page_info(result);
					
					//3、解析并显示导航条信息
					build_page_nav(result);
				}
				
			});
		}
		
		//模糊查询按钮的单击事件
		$("#notice_check_like_btn").click(function(){
			//获取模糊查询input框的输入值
			var likeName = $("#notice_select_input").val();
			console.log(likeName);
			//发送ajax请求模糊查询公告
			to_page_byLike(1,likeName);
		})
		
		/* 定时刷新 */
		$(function() {
			setInterval(flush, 1);
			function flush() {
				var mydate = new Date();
				var t = mydate.toLocaleString();
				$("#timeFresh").text(t);
			}
		});
		
	</script>
</body>
</html>